<template>
  <div class="adminHandle" >
    <div class="showPage" v-show="!isedit">

    <h2>第{{ selectyear }}学年成绩查询</h2>

    <div style="padding-bottom: 10px">
      <el-select v-model="selectyear" placeholder="请选择">
        <el-option
          v-for="item in whichyear"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <div class="tablelist">
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :default-sort = "{prop: 'usualScore', order: 'descending'}">
          <el-table-column
            prop="courseName"
            label="课程名称">
          </el-table-column>
          <el-table-column
            prop="studentName"
            label="学生名称">
          </el-table-column>
          <el-table-column
            prop="studentNumber"
            label="学生学号">
          </el-table-column>
          <el-table-column
            prop="stuCourseId"
            label="课程id"
            width="90px"
            sortable>
          </el-table-column>
          <el-table-column
            prop="endingFlag"
            label="是否结课"
            width="150px"
            align="center"
            sortable>
            <template slot-scope="scope">
              <img class="pic" v-show="scope.row.endingFlag" src="../../pages/admin/assets/correct.png">
              <img class="pic" v-show="!scope.row.endingFlag" src="../../pages/admin/assets/close.png">
            </template>
          </el-table-column>
          <el-table-column
            prop="examFlag"
            label="是否有考试"
            width="150px"
            align="center"
            sortable>
            <template slot-scope="scope">
              <img class="pic" v-show="scope.row.examFlag" src="../../pages/admin/assets/correct.png">
              <img class="pic" v-show="!scope.row.examFlag" src="../../pages/admin/assets/close.png">
            </template>
          </el-table-column>
          <el-table-column
            prop="finalScore"
            label="总成绩"
            sortable>
          </el-table-column>
          <el-table-column
            prop="usualScore"
            label="平时成绩"
            sortable>
          </el-table-column>
        </el-table>
      </template>
    </div>
      <el-button type="primary" plain @click="toEdit">成绩录入</el-button>
    </div>

    <div class="editPage" v-show="isedit">

      <h2>成绩录入</h2>

      <div class="tablelist">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :default-sort = "{prop: 'usualScore', order: 'descending'}">
            <el-table-column
              prop="courseName"
              label="课程名称">
            </el-table-column>
            <el-table-column
              prop="studentName"
              label="学生名称">
            </el-table-column>
            <el-table-column
              prop="studentNumber"
              label="学生学号">
            </el-table-column>
            <el-table-column
              prop="stuCourseId"
              label="课程id"
              width="90px"
              sortable>
            </el-table-column>
            <el-table-column
              prop="endingFlag"
              label="是否结课"
              width="150px"
              align="center"
              sortable>
              <template slot-scope="scope">
                <img class="pic" v-show="scope.row.endingFlag" src="../../pages/admin/assets/correct.png">
                <img class="pic" v-show="!scope.row.endingFlag" src="../../pages/admin/assets/close.png">
              </template>
            </el-table-column>
            <el-table-column
              prop="examFlag"
              label="是否结课"
              width="150px"
              align="center"
              sortable>
              <template slot-scope="scope">
                <img class="pic" v-show="scope.row.examFlag" src="../../pages/admin/assets/correct.png">
                <img class="pic" v-show="!scope.row.examFlag" src="../../pages/admin/assets/close.png">
              </template>
            </el-table-column>
            <el-table-column
              prop="finalScore"
              label="总成绩"
              sortable>
            </el-table-column>
            <el-table-column
              prop="usualScore"
              label="平时成绩"
              sortable>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.row)"
                  type="text"
                  size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

      <div class="editScoreForm">
        <el-form ref="form" :model="scoreForm" label-width="80px">
          <el-form-item label="学生学号">
            <el-input v-model="scoreForm.studentNumber"></el-input>
          </el-form-item>
          <el-form-item label="课程ID">
            <el-input v-model="scoreForm.stuCourseId"></el-input>
          </el-form-item>
          <el-form-item label="平时成绩">
            <el-input v-model="scoreForm.usualScore"></el-input>
          </el-form-item>
          <el-form-item label="最终成绩">
            <el-input v-model="scoreForm.finalScore"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">增加成绩项</el-button>
            <el-button @click="quitEdit()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "TeacherScoreInfo",
  data() {
    return {
      scoreForm:{
        studentNumber: "s1",
        stuCourseId: 0,
        usualScore: 0,
        finalScore: 0,
      },
      scoreFormDelete:{
        studentNumber: "s1",
        stuCourseId: 0,
        usualScore: 0,
        finalScore: 0,
      },
      isedit: false,
      selectyear: 1,
      whichyear: [
        {value:1,label:"第一学年"},
        {value:2,label:"第二学年"},
        {value:3,label:"第三学年"},
        {value:4,label:"第四学年"},],
      tableData: [],
      tableDataFlash: []
    }
  },
  methods:{
    toEdit(){
      this.isedit = true
    },
    quitEdit(){
      this.isedit = false
    },
    onSubmit(){
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');

      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip + '/score/',this.scoreForm).then((res)=>{console.log("put success!",res)})
      axios.get((this.ip + '/score/getStudentsMsg')).then((response)=>{
        console.log(response);
        for(let i=0;i<response.data.length;i++){
          this.tableDataFlash.push(response.data[i])
        }this.tableData = this.tableDataFlash
        this.tableDataFlash = []
        this.$forceUpdate()
      }).catch(function (error) {
        console.log(error);
      });
    },
    deleteRow(rows) {
      this.$set(rows,"usualScore",0)
      this.$set(rows,"finalScore",0)
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');
      this.scoreFormDelete.usualScore = rows.usualScore
      this.scoreFormDelete.finalScore = rows.finalScore
      console.log(this.scoreFormDelete.studentNumber,this.scoreFormDelete.stuCourseId)
      this.scoreFormDelete.studentNumber = rows.studentNumber
      this.scoreFormDelete.stuCourseId = rows.stuCourseId
      axios.defaults.headers.common["token"] = this.token;
      axios.put(this.ip + '/score/',this.scoreFormDelete).then((res)=>{console.log("put success!",res)})
      axios.get((this.ip + '/score/getStudentsMsg')).then((response)=>{
        for(let i=0;i<response.data.length;i++){
          this.tableDataFlash.push(response.data[i])
        }this.tableData = this.tableDataFlash
        this.tableDataFlash = []
        this.$forceUpdate()
      }).catch(function (error) {
        console.log(error);
      })
    }
  },
  mounted() {
    this.ip = localStorage.getItem('ip');
    this.token = sessionStorage.getItem('token');

    axios.defaults.headers.common["token"] = this.token;
    axios.get((this.ip + '/score/getStudentsMsg')).then((response)=>{
      console.log("aaa");
      for(let i=0;i<response.data.length;i++){
        this.tableData.push(response.data[i])
      }
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

}
.tablelist{
  padding-bottom: 20px;
}
.editScoreForm{
  margin: 0px 150px;
}
.pic{
  width: 20px;
  height: 20px;
}
</style>
